import React, { useEffect } from "react";
import { Section, Select } from "@/components/visualizations/editor";
import { EditorPropTypes } from "@/visualizations/prop-types";
// import MdEditor from "react-markdown-editor-lite";
// import 'react-markdown-editor-lite/lib/index.css';
// import E from 'wangeditor';

export default function GeneralSettings({ options, data, visualizationName, onOptionsChange }) {
  // const [editorType, setEditorType] = useState("");
  let editor = null;

  function setEditorType(value) {   
    onOptionsChange({ editorType: value });
  };

  function handleEditorChange({html, text}) {   
    onOptionsChange({ markdown: text });
  };

  useEffect(() => {
    require.ensure([], function(require) {
      import(/* webpackChunkName:"wangeditor" */ 'wangeditor').then(({default: E}) => {    
        editor = new E("#div1");
 
        editor.config.onchange = (newHtml) => {
          onOptionsChange({ markdown: newHtml });
        };
     
        // 需要展示的菜单
        editor.config.menus = [
            'head',
            'bold',
            'fontSize',
            'fontName',
            'italic',
            'underline',
            'strikeThrough',
            'indent',
            'lineHeight',
            'foreColor',
            'backColor',
            'link',
            'list',
            'todo',
            'justify',
            'quote',
            'table',
            'splitLine',
            'undo',
            'redo',
        ];
     
        /**一定要创建 */
        editor.create();

        editor.txt.html(options.markdown);

        return () => {
          editor.destroy()
        }    
      });
    }, 'wangeditor');
     
  // 这里一定要加上下面的这个注释  
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [options.markdown, onOptionsChange])
 
  return ( 
    <React.Fragment>
      <Section>
        <Select
          layout="horizontal"
          label="编辑器类型"
          defaultValue={options.editorType}
          onChange={value => setEditorType(value)}
        >
          <Select.Option value="">富文本编辑器</Select.Option>
          <Select.Option value="markdown">Markdown编辑器</Select.Option>
        </Select>
      </Section>
      <Section hidden={options.editorType==='markdown'}>
        <div>
          <div id="div1"></div>
        </div>
      </Section>
    {options.editorType==='markdown' && (
      <Section>
      {/* <MdEditor
        label="Markdown代码"
        style={{ width: "98%-50px", height: "360px"}}
        value={options.markdown}
        onChange={handleEditorChange}
       config={{
          imageUrl: "static/images/logo.png",
          linkUrl: "https://www.dazdata.com/",
          view:{menu: true, md: true, html: false}
        }}  
      />         */}
      </Section>
    )}
    </React.Fragment>
  );
}

GeneralSettings.propTypes = EditorPropTypes;
